<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 一般开发中都是用单文件组件，非单文件组件用的少 -->

        <!-- <h2>名称：{{schoolName}}</h2>
        <h2>地址：{{address}}</h2>
        <hr>
        <h2>姓名：{{studentName}}</h2>
        <h2>年龄：{{age}}</h2> -->

        <!-- 页面中使用自定义的组件 -->
        <school></school>
        <hr>
        <student></student>

    </div>


</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    // 创建school组件
    const school = Vue.extend({
        template: `
            <div>
                <h2>名称：{{schoolName}}</h2>
                <h2>地址：{{address}}</h2>
            </div>
        `,
        // 定义组件时候，一定不要写el配置项
        // 因为最终所有组件都要被一个vm管理，由vm绝对服务于哪个容器
        data() {
            return {    // 因为是定义组件，所以必须用函数式写data
                schoolName: '上海',
                address: '浦东新区',
            }
        }
    })
    // 创建student组件
    const student = Vue.extend({
        template: `
            <div>
                <h2>姓名：{{studentName}}</h2>
                <h2>年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: 'aBiu',
                age: 18,
            }
        }
    })

    // 如果想设置成全局都能引入的组件，如下设置：
    // Vue.component('student', student)   // 这样，其他所有的vm实例都可以使用student组件了

    const vm = new Vue({
        el: "#root",
        data: {
            // schoolName: '上海',
            // address: '浦东新区',
            // studentName: 'aBiu',
            // age: 18,

            // 使用组件，所以不用在data里写以后的公用属性了，
            // 要编写2个组件，学校和学生
        },

        // 引入组件
        components: {
            // 这种属于 局部注册    
            school,
            student,

            // 上面的是简写方式，如果是多个单词的名称，规范是：
            // 比如想取其他名字
            // 'my-school': school,
            // 或者如果是脚手架的话，可以这样
            // 'MySchool': school,
            // 别名是什么，页面中使用时候就写什么
        }
    })
</script>

</html>